<template>
  <div style="width: 100%">
    <div align="center" ref="chartRef" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script setup name="chart">
import {markRaw, onMounted, ref} from "vue";
import * as echarts from "echarts";

const chartRef = ref();
const chartInstance= ref();

onMounted(()=>{
  chartInstance.value = markRaw(echarts.init(chartRef.value));
  const colors = ['#5470C6', '#EE6666'];
  const option = {
    color: colors,
    tooltip: {
      trigger: 'none',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {},
    grid: {
      top: 70,
      bottom: 50
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[1]
          }
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return (
                  'Precipitation  ' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data : '')
              );
            }
          }
        },
        name: 'Number of paired CpG ', // 设置横坐标名称
        nameLocation: 'middle', // 名称位置
        nameGap: 30, // 名称与轴的距离
        data: ['1','2','3','4','5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16','17','18','19','20','21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32','33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64']
      },
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[0]
          }
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return (
                  'Precipitation  ' +
                  params.value +
                  (params.seriesData.length ? '：' + params.seriesData[0].data : '')
              );
            }
          }
        },
        name: 'Number of paired SNV ', // 设置横坐标名称
        nameLocation: 'middle', // 名称位置
        nameGap: 30, // 名称与轴的距离
        data: ['1','2','3','4','5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16','17']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'SNV（red）or CpG (blue) number', // 设置纵坐标名称
        nameLocation: 'middle', // 名称位置
        nameGap: 70 // 名称与轴的距离
      }
    ],
    series: [
      {
        name: 'Number of paired SNV for a CpG',
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: [
          2603285,397132,65344, 12210, 2995,1084,530,271,146,56,27,19,16,6,1,2,3
        ]
      },
      {
        name: 'Number of paired CpG for a SNV',
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: [
          1423558,623338,146133,58176,21121,9982,5191,3086,1944,1324,997,707,532,421,296,232,219,186,145,118,105,95,59,54,49,52,34,28,34,23,20,20,21,18,22,13,13,11,9,8,11,10,4,2,4,3,3,2,1,3,4,1,3,1,1,2,1,1,1,1, 1, 1,1,1,1,1,1
        ]
      }
    ]
  };
  chartInstance.value.setOption(option);
});
</script>

<style scoped>

</style>